import { formatGMTDate, toPercent, arrayToObject } from '../../../../assets/js/util.js'
import advance from '../advancedFilter.vue'
import echarts from 'echarts'
export default {
    data() {
        return {
            // 渠道数组
            plats: [],
            // 渠道数组
            channels: [],
            // 服务器数组
            servers: [],
            date: '',
            title: '付费收入',
            xlsxTitle:'',
            loading: false,
            chartsName: 'platContrastCharts',
            // 默认参数 和 URL
            SRC: '',
            DP: {
                p: '',
                f: ''
            },
            searchable: false,
            activeName: '1',
            payType: 'payCount',
            payTypes: [],
            pickerOptions: {
                disabledDate(time) {
                    if (time.getTime() > Date.now()) {
                        return time.getTime();
                    }
                },
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近15天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            postObj: {
                dstart: '',
                dend: '',
                platform: '0',
                channel: '0',
                server: '0'
            },
            dialogFormVisible: false,
            form: {
                date: '',

                dateStart: '',
                dateEnd: '',
                orderid: '',
                orderid2: '',
                userid: '',
                roleid: '',
                platform: '',
                platforms: [],
                channel: '',
                channels: [],
                serverid: '',
                serverids: [],
                flag: '',
                addtype: '',
                addtypes: [],
                productid: '',
                productids: [],

                firstRecharges: [
                    { label: '全部', value: '-1' },
                    { label: '是', value: '1' },
                    { label: '否', value: '0' }
                ]
            },
            inputWidth: '220px',
            formLabelWidth: '100px',
            /*当前页显示数量*/
            pageSize: 10,
            /*每页显示的数量*/
            pageSizes: [10, 20, 50, 100],
            /*dataTotal表数量*/
            dataTotal: 0,
            /*表格数据*/
            realTimeServiceTableData: [],
            /*一次取出所有数据*/
            realTimeServiceTableDatas: [],
            /*realTimeServiceContent 的宽*/
            realTimeServiceContent: '100%',
            /*表的宽度*/
            realTimeServiceTableWidth: "100%",
            /*整体数据表头数据*/
            payAllTableData: [],
            payAllTableHead: [
                { prop: 'activeUser', label: '活跃人数' },
                { prop: 'payCount', label: "付费金额("+localStorage.getItem("ZULONGBICURRENCY")+")" },
                { prop: 'payUser', label: '付费人数' },
                { prop: 'payInRadio', label: '付费渗透率' },
                { prop: 'payARPU', label: "付费ARPU("+localStorage.getItem("ZULONGBICURRENCY")+")" },
                { prop: 'activeARPU', label: "活跃ARPU("+localStorage.getItem("ZULONGBICURRENCY")+")" }
            ],
            /*付费趋势数据表头数据*/
            payTrendTabelHead: [
                { prop: 'dateStr', label: '日期' },
                { prop: 'payCount', label: "付费金额("+localStorage.getItem("ZULONGBICURRENCY")+")" },
                { prop: 'payUser', label: '付费人数' },
                { prop: 'payInRadio', label: '付费渗透率' },
                { prop: 'payARPU', label: "付费ARPU("+localStorage.getItem("ZULONGBICURRENCY")+")" },
                { prop: 'activeARPU', label: "活跃ARPU("+localStorage.getItem("ZULONGBICURRENCY")+")" }
            ],
            payTrendTabelData: [],
            /*分页器*/
            currentPage: 1,
            /*付费分类表头数据*/
            payTypesTabelHead: [
                { prop: 'classStr', label: '分类' },
                { prop: 'activeUser', label: '活跃人数' },
                { prop: 'payUser', label: '付费人数' },
                { prop: 'payCount', label: "付费金额("+localStorage.getItem("ZULONGBICURRENCY")+")" },
                { prop: 'payInRadio', label: '付费渗透率' },
                { prop: 'payARPU', label: "付费ARPU("+localStorage.getItem("ZULONGBICURRENCY")+")" },
                { prop: 'activeARPU', label: "活跃ARPU("+localStorage.getItem("ZULONGBICURRENCY")+")"}
            ],
            payTypesTabelData: [],
            /*echarts图表设置初始化*/
            payTrendOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                color: ['#20a0ff'],
                legend: {
                    data: ["付费金额"] //
                },
                toolbox: {
                    right: '20',
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        magicType: {
                            type: ['line', 'bar']
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: ['20%', '20%'],
                    data: [] //
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: ["付费金额"], //
                    type: "line",
                    data: [],
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1.2, [{
                                offset: 0,
                                color: '#20a0ff'
                            }, {
                                offset: 1,
                                color: '#fff'
                            }])
                        }
                    }
                }]
            },
            payType1Option: {
                title: {
                    text: '活跃人数',
                    x: 'center'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []
                },
                color: ['#91c7ae', '#79bde9', '#d479aa', '#9d79d8'],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [{
                    name: '活跃人数',
                    type: 'pie',
                    radius: '55%',
                    // center: ['50%', '60%'],
                    data: [
                        { value: 310, name: '老用户' },
                        { value: 335, name: '新用户' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            },
            platContrastOption: {
                legend: {
                    data: ['安卓', 'iOS']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '30%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['付费人数比例', '付费金额比例', '付费人数比例', '付费金额比例', '付费人数比例', '付费金额比例'],
                    axisLabel: {
                        interval: 0,
                        rotate: -90, //倾斜度 -90 至 90 默认为0
                        margin: 10,
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: function(value) {
                            return toPercent(value);
                        }
                    }
                }],
                dataZoom: [ {
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                color: ['rgb(72, 151, 241)', 'rgb(13, 35, 58)'],
                tooltip: [{
                    trigger: 'axis',
                    formatter: function(a) {
                        var temp = '';
                        for (var i = 0, len = a.length; i < len; i++) {
                            temp = temp + a[i].seriesName + ':' + toPercent(a[i].value) + '</br>';
                        }
                        return a[0].name + '</br>' + temp;

                    }
                }],
                series: [{
                        name: '安卓',
                        type: 'bar',
                        data: ['46.52', '39.4', '46.52', '39.4', '46.52', '39.4'],
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: function(value) {
                                    return toPercent(value.value);
                                }
                            }

                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#84ebd8'},
                                        {offset: 0.5, color: '#7fd2e2'},
                                        {offset: 1, color: '#7abde8'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#7abde8'},
                                        {offset: 0.7, color: '#7fd2e2'},
                                        {offset: 1, color: '#84ebd8'}
                                    ]
                                )
                            }
                        },
                    },
                    {
                        name: 'iOS',
                        type: 'bar',
                        data: ['4.82', '10.6', '4.82', '10.6', '4.82', '10.6'],
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: function(value) {
                                    return toPercent(value.value);
                                }
                            }

                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#b8cff1'},
                                        {offset: 0.5, color: '#a99ce4'},
                                        {offset: 1, color: '#a07cdc'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#a07cdc'},
                                        {offset: 0.7, color: '#a99ce4'},
                                        {offset: 1, color: '#b8cff1'}
                                    ]
                                )
                            }
                        },
                    }
                ]
            },
            //付费对比表格 表头及数据
            payCompareTabelHead: [
                { prop: 'classStr', label: '分类' },
                { prop: 'payUser', label: '付费人数' },
                { prop: 'payUserRadio', label: '付费人数比例' },
                { prop: 'payCount', label: "付费金额("+localStorage.getItem("ZULONGBICURRENCY")+")" },
                { prop: 'payCountRadio', label: '付费金额比例' }
            ],
            payCompareData: [],
            payTrendTabelDataAll: [],
            //付费分类表格数据
            payTypesTabelData:[],
            payTrendChart: [],
            payTrendChart1: [],//付费人数图表数据
            payTrendChart2: [],//付费渗透效率势图表数据
            payTrendChart3: [],//活跃ARPU图表数据
            payTrendChart4: [],//付费ARPU图表数据
            //付费对比表格数据
            payCompareDataH: [],//付费对比数据列表-平台
            payCompareChart: [],//付费对比图表-平台
            payCompareData1 :[],//付费对比数据列表-渠道
            payCompareChart1: [],//付费对比图表-渠道
            payCompareData2 :[],//付费对比数据列表-区服
            payCompareChart2: [],//付费对比数据列表-区服
        }
    },
    components: {
        'v-advance': advance
    },
    computed: {
        // xlsx() {
        //     return this.title + '.xlsx';
        // }
    },
    methods: {
        successFun(data) {
            this.$message({
                message: data,
                type: 'success'
            });
        },
        errorFun(data) {
            this.$message.error(data);
        }, // 选择游戏的平台
        handleSelect(key, keyPath) {
            if (key === '4') {
                this.$refs.advance.filterShow = true;
                return
            }
            if (this.postObj['server'] === '0' && this.postObj['channel'] === '0') {
                this.postObj['server'] = '0';
                this.postObj['channel'] = '0';
                this.postObj['platform'] = key;
                this.getList("updatePlatform",`platform=${key}`);
                this.getData(this.postObj);
            } else {
                if (key === "3" || key === "2" || key === "9") {
                    this.errorFun("请修改为全渠道和全服！")
                }
            }
        },
        //付费趋势 select change
        payTrendChange(url) {
            switch (url){
                case 'payCount': this.echartsData(this.payTrendChart); break;
                case 'payUser': this.echartsData(this.payTrendChart1); break;
                case 'payInRadio': this.echartsData(this.payTrendChart2); break;
                case 'activeARPU': this.echartsData(this.payTrendChart3); break;
                case 'payARPU': this.echartsData(this.payTrendChart4); break;
            }

        },
        // 获取服务器list 平台list  服务器list
        getList(url,choose) {
            var that = this;
            var pushData = function(pushArr, attr, data) {
                that[pushArr] = [];
                for (var i in data[attr]) {
                    that[pushArr].push({
                        value: i,
                        label: data[attr][i]
                    })
                }
            };
            this.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=${url}`,{
                params:{'ps': choose }
            }).then(function(res) {
                var data = JSON.parse(JSON.parse(res.body));
                if (parseInt(data["res"]) === 0) {
                    // 后台select的数据
                    var lists = ["platformItmes", "channelItmes", "serverItmes"];
                    // 页面select名字
                    var nameLists = ["plats", "channels", "servers"];
                    for (var i = 0; i < lists.length; i++) {
                        if (data[lists[i]] !== undefined) {
                            pushData(nameLists[i], lists[i], data);
                        }
                    }
                } else {
                    this.getErrorMsg(Number(data.res))
                }
            })
        }, // 时间改变 得到起始时间和结束时间
        dateChange(val) {
            if (val === undefined) {
                this.errorFun('请选择查看时间！')
            } else {
                var t = val.split(' - ')
                this.postObj.dstart = t[0];
                this.postObj.dend = t[1];
                this.getData(this.postObj);
            }
        },
        //付费趋势中的select切换
        selectPayTypes(val) {
            this.payTrendChange(val);
        },
        /*分页器*/
        handleSizeChange(val) {
            this.pageSize = val;
            this.payTrendTabelData = this.payTrendTabelDataAll.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.payTrendTabelData = this.payTrendTabelDataAll.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        },
        /*获取数据*/
        getData: function(data) {
            var that = this;
            var p = new Promise(function(resolve, reject) {
                that.$http.jsonp(`${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=search`, {
                    params: {'ps':`dstart=${data.dstart}&dend=${data.dend}&platform=${data.platform}&channel=${data.channel}&server=${data.server}`}
                }).then(function(res) {
                    that.payTypesTabelData = [];
                    that.payTrendChart =[]
                    that.payTrendChart1 = [];//付费人数图表数据
                    that.payTrendChart2 = [];//付费渗透效率势图表数据
                    that.payTrendChart3 = [];//活跃ARPU图表数据
                    that.payTrendChart4 = []//付费ARPU图表数据
                    that.payCompareDataH = [];//付费对比数据列表-平台
                    that.payCompareChart =[];//付费对比图表-平台
                    that.payCompareData1 = [];//付费对比数据列表-渠道
                    that.payCompareChart1 = [];//付费对比图表-渠道
                    that.payCompareData2 = [];//付费对比数据列表-区服
                    that.payCompareChart2 =[];//付费对比数据列表-区服
                    resolve(res.body)
                })
            })
            p.then(function(value) {
                var data = JSON.parse(value)
                data = JSON.parse(data.replace(/\"\{\"/g, '\{\"').replace(/\"\}\"/g, '\"\}'));
                if (parseInt(data["res"]) === 0) {
                    that.payAllTableData = [data["overviewPayData"]]; //付费总体数据
                    //付费趋势select payType
                    var makePayTypes = [];
                    if(data["payTrendChart"] !== undefined){
                        var payTypeItems = data["payTrendChart"]["allItmes"];
                    }
                    for (var item in payTypeItems) {
                        makePayTypes.push({ "label": item, "value": payTypeItems[item] });
                    }
                    that.payTypes = makePayTypes;
                    //付费趋势charts
                    //付费趋势表格数据
                    that.payTrendTabelDataAll = data["payTrendData"];
                    that.payTrendTabelData = that.payTrendTabelDataAll.slice((that.currentPage - 1) * that.pageSize, that.currentPage * that.pageSize)

                    //付费分类charts
                    //付费分类表格数据
                    that.payTypesTabelData = data["payClassData"];
                    that.payTrendChart = data['payTrendChart'];
                    that.payTrendChart1 = data['payTrendChart1'];//付费人数图表数据
                    that.payTrendChart2 = data['payTrendChart2'];//付费渗透效率势图表数据
                    that.payTrendChart3 = data['payTrendChart3'];//活跃ARPU图表数据
                    that.payTrendChart4 = data['payTrendChart4'];//付费ARPU图表数据
                    //付费对比表格数据
                    that.payCompareDataH = data["payCompareData"];//付费对比数据列表-平台
                    that.payCompareChart = data["payCompareChart"];//付费对比图表-平台
                    that.payCompareData1 = data["payCompareData1"];//付费对比数据列表-渠道
                    that.payCompareChart1 = data["payCompareChart1"];//付费对比图表-渠道
                    that.payCompareData2 = data["payCompareData2"];//付费对比数据列表-区服
                    that.payCompareChart2 = data["payCompareChart2"];//付费对比数据列表-区服
                    that.payTrendChange(that.payType);
                    that.echartsDataType(data);
                    //付费对比charts
                    that.changeCompare(that.chartsName);
                    //将表格中的率都转成百分数
                    that.percent();
                } else {
                    that.errorFun(data['msg']);
                }

                that.dataTotal = that.payTrendTabelDataAll.length;
            })
        },
        //填充/更改表格数据-付费趋势
        echartsData(d) {
            //this.realLoadShow = false;
            if (d === undefined) {
                var data = {
                    "columnkeys": [],
                    "names": [],
                    "data": [
                        []
                    ]
                }
            } else {
                var data = d['jsonStr'];
            }
            this.payTrendCharts.setOption({
                legend: {
                    data: data["names"] //
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: ['20%', '20%'],
                    data: data["columnkeys"] //
                }],
                series: [{
                    name: data["names"],
                    data: data["data"][0]
                }]
            });
        },
        //填充/更改表格数据-付费分类
        echartsDataType(d) {
            var that = this;
            if (d["payClassChart"] === undefined) {
                var dataC0 = {
                    "hctitle": [],
                    "names": [],
                    "rowkeys": "",
                    "data": [
                        []
                    ]
                };
                var dataC1 = {
                    "hctitle": [],
                    "names": [],
                    "rowkeys": "",
                    "data": [
                        []
                    ]
                };
                var dataC2 = {
                    "hctitle": [],
                    "names": [],
                    "rowkeys": "",
                    "data": [
                        []
                    ]
                }
            } else {
                var dataC0 = d["payClassChart"][0]["jsonStr"];
                var dataC1 = d["payClassChart"][1]["jsonStr"];
                var dataC2 = d["payClassChart"][2]["jsonStr"];
            }
            this.payType1Charts.setOption({
                color: ['#91c7ae', '#d479aa', '#79bde9', '#9d79d8'],
                title: {
                    text: dataC0["hctitle"]
                },
                legend: {
                    data: dataC0["names"]
                },
                series: [{
                    name: dataC0["rowkeys"],
                    data: that.formatPieData(dataC0["data"])
                }]
            });
            this.payType2Charts.setOption({
                color: ['#d479aa', '#9d79d8', '#91c7ae', '#79bde9'],
                title: {
                    text: dataC1["hctitle"]
                },
                legend: {
                    data: dataC1["names"]
                },
                series: [{
                    name: dataC1["rowkeys"],
                    data: this.formatPieData(dataC1["data"])
                }]
            });
            this.payType3Charts.setOption({
                title: {
                    text: dataC2["hctitle"]
                },
                legend: {
                    data: dataC2["names"]
                },
                series: [{
                    name: dataC2["rowkeys"],
                    data: this.formatPieData(dataC2["data"])
                }]
            });
        },
        /*format pie data*/
        formatPieData(data) {
            var returnVal = [];
            for (var i = 0; i < data[0].length; i++) {
                var returnIn = {};
                returnIn.name = data[0][i][0];
                returnIn.value = data[0][i][1];
                returnVal.push(returnIn);
            }
            return returnVal;
        },
        echarsDataCompare(data, chartName) {
            if (data === undefined) {
                var data = {
                    names:[],
                    data:[],
                };
            } else {
                var data = data["jsonStr"];
            }
            this[chartName].setOption({
                legend: {
                    data: data["names"]
                },
                xAxis: [{
                    type: 'category',
                    data: data["columnkeys"]
                }],
                series: [{
                        name: data["names"][0],
                        data: data["data"][0]
                    },
                    {
                        name: data["names"][1],
                        data: data["data"][1]
                    }
                ]
            });

        },
        _dataPush(firstData, lastData) {
            for (var key in firstData) {
                lastData.push({ label: key, value: firstData[key] })
            }
        },
        chartsWidth(el) {
            if (document.getElementById(el) !== null && el.indexOf('payType') != -1) {
                document.getElementById(el).style.width = (window.innerWidth - 290) / 3 + "px";
            } else if (document.getElementById(el) !== null) {
                document.getElementById(el).style.width = window.innerWidth - 290 + "px";
            }
        },
        //付费对比，切换tab事件
        changeCompareType(target) {
            var label = target.label;
            this.changeCompare(label);
        },
        changeCompare(label){
            var type = "";
            if (label === "平台对比" || label === 'platContrastCharts') {
                type = "platform";
                this.chartsName = "platContrastCharts";
                this.payCompareData = this.payCompareDataH;
                this.echarsDataCompare(this.payCompareChart,this.chartsName);
            } else if (label === "渠道对比" || label ==="channelContrastCharts") {
                type = "channel";
                this.chartsName = "channelContrastCharts";
                this.payCompareData = this.payCompareData1;
                this.echarsDataCompare(this.payCompareChart1,this.chartsName);
            } else if (label == "区服对比" || label ==="serverContrastCharts") {
                type = "server";
                this.chartsName = "serverContrastCharts";
                this.payCompareData = this.payCompareData2;
                this.echarsDataCompare(this.payCompareChart2,this.chartsName);
            }
        },
        //Table中所有比例相关的数据都要转成百分数
        percent() {
            //整体数据
            var allData = this.payAllTableData;
            for (var i = 0; i < allData.length; i++) {
                for (var j in allData[i]) {
                    if (j === 'payInRadio') {
                        allData[i][j] = toPercent(allData[i][j]);
                    }
                }
            }
            this.payAllTableData = allData;

            //趋势数据
            var trendData = this.payTrendTabelData;
            for (var i = 0; i < trendData.length; i++) {
                for (var j in trendData[i]) {
                    if (j === 'payInRadio') {
                        trendData[i][j] = toPercent(trendData[i][j]);
                    }
                }
            }
            this.payTrendTabelData = trendData;

            //分类数据
            var typeData = this.payTypesTabelData;
            for (var i = 0; i < typeData.length; i++) {
                for (var j in typeData[i]) {
                    if (j === 'payInRadio') {
                        typeData[i][j] = toPercent(typeData[i][j]);
                    }
                }
            }
            this.payTypesTabelData = typeData;

            //对比数据
            var compareData = this.payCompareData;
            for (var i = 0; i < compareData.length; i++) {
                for (var j in compareData[i]) {
                    if (j === 'payCountRadio' || j === 'payUserRadio') {
                        compareData[i][j] = toPercent(compareData[i][j]);
                    }
                }
            }
            this.payCompareData = compareData;

            //对比数据
            var compareData1 = this.payCompareData1;
            for (var i = 0; i < compareData1.length; i++) {
                for (var j in compareData1[i]) {
                    if (j === 'payCountRadio' || j === 'payUserRadio') {
                        compareData1[i][j] = toPercent(compareData1[i][j]);
                    }
                }
            }
            this.payCompareData1 = compareData1;
            //对比数据
            var compareData2 = this.payCompareData2;
            for (var i = 0; i < compareData2.length; i++) {
                for (var j in compareData2[i]) {
                    if (j === 'payCountRadio' || j === 'payUserRadio') {
                        compareData2[i][j] = toPercent(compareData2[i][j]);
                    }
                }
            }
            this.payCompareData2 = compareData2;
        },
        //初始化
        _init() {
            var arr = ['payTrend', 'payType1', 'payType2', 'payType3', 'serverContrast', 'channelContrast', 'platContrast'];
            var arr2 = ['payTrendOption', 'payType1Option', 'payType1Option', 'payType1Option', 'platContrastOption', 'platContrastOption', 'platContrastOption'];
            for (var x = 0; x < arr.length; x++) {
                this.chartsWidth(arr[x]);
                this[arr[x] + 'Charts'] = echarts.init(document.getElementById(arr[x]));
                this[arr[x] + 'Charts'].setOption(this[arr2[x]]);
            }
            window.addEventListener('resize', function() {
                /*修改表格的宽度*/
                this.realTimeServiceTableWidth = document.body.clientWidth - 240 + "px";
                this.realTimeServiceContent = document.body.clientWidth - 220 + "px";

                for (var i in arr) {
                    this.chartsWidth(arr[i])
                }
                var resizeArr = ['payTrendCharts', 'serverContrastCharts', 'channelContrastCharts', 'payType3Charts', 'payType1Charts', 'payType2Charts', 'platContrastCharts']
                for (var j in resizeArr) {
                    this[resizeArr[j]].resize();
                }
            }.bind(this))
        },
        // 表格下载
        excel(tabelHead, data, val) {
           this.xlsxTitle = val+"-"+this.postObj.dstart+"到"+this.postObj.dend;
           this.downloadExl(tabelHead, data,this.xlsxTitle, val);
        },
        /*选择平台切换*/
        head_choose_plat_fun(index) {
            for (var i = 0; i < this.head_choose_plat.length; i++) {
                this.head_choose_plat[i].activeIndex = false;
            }
            this.head_choose_plat[index].activeIndex = true;
        },
        head_choose_time_fun(index) {
            for (var i = 0; i < this.head_choose_time.length; i++) {
                this.head_choose_time[i].activeIndex = false;
            }
            this.head_choose_time[index].activeIndex = true;
        },
        accordionChange() {}
    },
    mounted() {
        // 初始化URL
        this.SRC = this.$store.getters.src;
        this.DP.p = localStorage.getItem('ZULONGBIPROJECTID');
        this.DP.f = localStorage.getItem('ZULONGBIPAGEID');
        this.date = [new Date(new Date().getTime() - 8 * 86400000), new Date(new Date().getTime() - 86400000)];
        this.postObj.dstart = formatGMTDate(new Date(new Date().getTime() - 8 * 86400000), true);
        this.postObj.dend = formatGMTDate(new Date(new Date().getTime() - 86400000), true);
        // 获取到服务器 平台 渠道 list
        this.getList("initParam","");


        // 请求数据
        this.getData(this.postObj);
        this._init()
    }
}